<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{dataForm.specId?'编辑规格库':'新增规格库'}}</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item prop="specType" label="规格类型" >
            <el-select v-model="dataForm.specType" placeholder="请选择规格类型" clearable disabled="disabled">
              <el-option
                v-for="item in specTypeList"
                :value="item.id"
                :label="item.name"
                :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="specName" label="规格名称">
            <el-input type="text" v-model="dataForm.specName"></el-input>
          </el-form-item>
          <el-form-item prop="specUnit" label="规格单位" >
            <el-input type="text" v-model="dataForm.specUnit" clearable></el-input>
          </el-form-item>
          <el-form-item prop="specDesc" label="规格描述">
            <el-input type="textarea" v-model="dataForm.specDesc"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <div class="tit">
            <h2>规格值</h2>
            <el-button plain type="success" icon="el-icon-plus" circle @click="add()">

            </el-button>
          </div>
          <el-table :data="dataForm.specValList" max-height="800" style="width:400px;margin-top: 5px;">
            <el-table-column label="操作" align='center' width="100">
              <template slot-scope="scope">
                <el-button plain type="danger" icon="el-icon-minus" circle @click="sub(scope.$index)">

                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="规格值" align="center" width="300">
              <template slot-scope="scope">
                <el-input v-model="scope.row.specVal" placeholder="请输入规格值">

                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as message from "@/constants/message";
  import SpecApi from '@/api/goods/spec';

  export default {
    data() {
      return {
        dataForm: {
          specId: "",
          specType: 2,
          specName: "",
          specUnit: "",
          specDesc: "",
          specValList:[
            {
              specVal:"",
            }
          ]
        },
        specTypeList: [
          {id: 1, name: "产品"},
          {id: 2, name: "公共"}
        ],
        roleRules: {
          specName: [
            {required: true, message: "请输入规格名字", trigger: "focus"}
          ],
          specType: [
            {required: true, message: "请选择规格类型", trigger: "change"}
          ]
        }
      }
    },
    components: {
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        if (this.$route.query.id) {
          this.dataForm.specId = this.$route.query.id
          this.getData()
        }
      },
      keydown(e) {
        if (e.keyCode == 32) {
          e.returnValue = false;
        }
      },
      getData() {
        SpecApi.getSpecInfo({
          id: this.dataForm.specId
        }).then(res => {
          this.$Utils.bindingBean(this.dataForm, res.data)
        })
      },
      add(){
        this.dataForm.specValList.push({
            specVal:"",
        })
      },
      sub(index){
        this.dataForm.specValList.splice(index,1)
      },
      checkData(){
        const {specValList} = this.dataForm
        this.dataForm.specValList = specValList.filter((item,index)=>item.specVal&&specValList.findIndex(item2=>item2.specVal==item.specVal)==index)
      },
      sureClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.checkData()
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                if (this.dataForm.specId) {
                  this.editData();
                } else {
                  this.addData();
                }
              });
          }
        })
      },
      addData() {
        let param = {
          specName: this.dataForm.specName,
          specType: this.dataForm.specType,
          specUnit: this.dataForm.specUnit,
          specDesc: this.dataForm.specDesc,
          specValList:this.dataForm.specValList
        };

        SpecApi.addSpec(param).then(res => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
      },
      editData() {
        console.log(this.dataForm.specValList)
        let param = {
          specId: this.dataForm.specId,
          specName: this.dataForm.specName,
          specType: this.dataForm.specType,
          specUnit: this.dataForm.specUnit,
          specDesc: this.dataForm.specDesc,
          specValList:this.dataForm.specValList
        };
        SpecApi.editSpec(param)
          .then(data => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/goods/specManagement'});
      }
    },

  }
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
  .upload-img {
    &::v-deep .el-upload-dragger {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .tip {
        padding-bottom: 30px;
      }
    }
  }
</style>

